<template>
  <div class="login">
    <div class="backdrop">
      <img src="@/assets/images/logo_pic.jpg" alt="您的浏览器你不支持">
    </div>
    <div class="title-logo">
      <div class="logo">
        <img src="@/assets/images/logo_115_115.png" alt="您的浏览器你不支持">
      </div>
      <div class="title">
        <h3>蓝莓派</h3>
        <hr>
        <p>和音乐一起分享时光</p>
      </div>
    </div>
    <div class="login-box">
      <input class="userName" v-model= "LUserName" @blur="usernameHandle" placeholder="请输入用户名">
      <input class="passWord" v-model="LUserPsd" type="password" @blur="passwordHandle" name="" placeholder="请输入账号密码">
      <input class="verify" v-model="picLyanzhengma" @blur="checkLpicma" type="text" name="" placeholder="验证码" >
      <input type="button" id="code" @click="createCode" class="verification1" v-model="checkCode"/> <br>
      <button type="buttom" @click="loginHandle">登录</button>
      <a href="javascript:;" class="forget">忘记密码？</a>
      <a href="javascript:;" @click="addRegister" class="register">注册新账号</a>
    </div>
    <div class="foot">
      <p>您还可以使用第三方账号登录</p>
      <i @click="qqHandle" class="iconfont">&#xe601;</i>
      <i @click="wxHandle" class="iconfont">&#xe63e;</i>
      <i @click="wbHandle" class="iconfont">&#xe657;</i>
      <p class="copyright">蓝莓派版权所有 京ICP备12346335号</p>
    </div>
    <div class="result"><p>{{ this.value }}</p></div>
    <div class="msg"><p>{{this.$route.query.msg}}</p></div>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
import { USERNAME } from '../store/mutations/mutations-type.js'
import qs from "qs"
var code ; 
export default {
  name: 'Login',
  data(){
    return{
        userPhone:'',
        dialog: false,
        LUserName:'',
        LUserPsd:'',
        picLyanzhengma:'',
        checkCode:'info',
        value:''
    }
  },
  computed:{
    ...mapState(['UserName'])
  },
  methods:{
    ...mapMutations([USERNAME]),
    loginHandle(event){
      if(this.usernameHandle() == true && this.passwordHandle() ==true && this.checkLpicma() == true){
        this.$axios.get(this.HOST+"/api/login",{
          params:{
            "username":this.LUserName,
            "password":this.LUserPsd
        }})
        .then(data => {
          console.log(data)
          if (data.data.code===200) {
            this.$router.back()
            // localStorage.setItem('username',this.LUserName)
            this.USERNAME(this.LUserName)
          }
            return
        })
        .then(error => {
          this.value = "账号或密码错误"
        })
      }
    },
    // 失去焦点判断账号是否为空
    usernameHandle(event){
      if(this.LUserName==""){
        this.value = "账号不能为空"
        this.$route.query.msg = ""
      }else if(this.LUserName.length>0){
        this.value = ""
        this.$route.query.msg = ""
        return true
      }
    },
    // 失去焦点判断密码是否为空
    passwordHandle(event){
      if(this.LUserPsd==""){
        this.value = "密码不能为空"
        this.$route.query.msg = ""
      }else if(this.LUserPsd.length>0){
        this.$route.query.msg = ""
        this.value = ""
        return true
      }
    },
    qqHandle(event){
        window.location.href ="http://ios.pgzs.com/app?action=content&appid=444934666&ala&placeid=111002"
    },
    wxHandle(event){
      window.location.href = "http://ios.pgzs.com/app?action=content&appid=414478124&ala&placeid=111002"
    },
    wbHandle(event){
      window.location.href = "http://ios.pgzs.com/app?action=content&appid=350962117&ala&placeid=111002"
    },
    addRegister(event){
      this.$router.push('Register')
    },
      // 图片验证码
    createCode(){
        code = "";    
        var codeLength = 4;//验证码的长度   
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',   
         'S','T','U','V','W','X','Y','Z');//随机数   
        for(var i = 0; i < codeLength; i++) {//循环操作   
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）   
            code += random[index];//根据索引取得随机数加到code上   
        }   
            this.checkCode = code;//把code值赋给验证码   
    },
    // 失焦验证图和密码
    checkLpicma(){
      
        this.picLyanzhengma.toUpperCase();//取得输入的验证码并转化为大写         
        if(this.picLyanzhengma == '') {
          this.value = '请输入验证码'
          this.$route.query.msg = ""

        }else if(this.picLyanzhengma.toUpperCase() != this.checkCode ) { //若输入的验证码与产生的验证码不一致时    
            console.log( this.picLyanzhengma.toUpperCase())
            console.log(code)           
            this.value = '输入的验证码不正确'
            this.createCode();//刷新验证码   
            this.picLyanzhengma = '';
            this.$route.query.msg = ""

        }else { //输入正确时   
            this.$route.query.msg = ""
            this.value = ''
            return true;
        } 
    },
      created(){
      this.createCode();
    }
  }
}
</script>

<style lang="css" scoped>
.msg{
  position: absolute;
  text-align: center;
  color: #f75454;
  width: 100%;
  top: 0.2rem;
}
.login{
  font-size: 0.3rem;
  position: relative;
}
.login .backdrop img{
  filter: blur(2px);
  opacity: 0.5;
}
.title-logo{
  width: 80%;
  display: flex;
  text-align: center;
  position: absolute;
  top: 0.8rem;
  left: 10%;
}
.title-logo .logo img{
  flex: 1;
  width: 0.65rem;
}
.title-logo .title{
  flex: 2;
}
.title-logo .title h3{
  letter-spacing: 0.2rem;
}
.title-logo .title hr{
  width: 80%;
  margin: 0 auto;
}
.title-logo .title p{
  font-size: 0.2rem;
}
.login-box{
  font-size: 0.24rem;
  position: absolute;
  top: 2rem;
  width: 70%;
  left: 15%;
}
.login-box input{
  padding-left: 0.1rem;
  background-color: #fff;
  border: 1px solid #eee;
  width: 100%;
}
.login-box .userName{
  border-radius: 5px 5px 0 0;
}
.login-box .passWord{
  border-radius: 0 0 5px 5px;
}
.login-box .verify{
  margin-top: 0.2rem;
  border-radius: 5px;
  width: 60%;
}
.login-box .verification1{
  padding: 0;
  width: 30%;
}
.login-box button{
  background-color: #01bbae;
  margin-top: 0.3rem;
  font-size: 0.2rem;
  border-radius: 5px;
  border: none;
  color: #fff;
  outline: none;
  width: 100%;
  height: 0.4rem;
}
.login-box a{
  font-size: 0.16rem;
}
.login-box .register{
  float: right;
}
.foot{
  width: 100%;
  text-align: center;
  font-size: 0.2rem;
  position: absolute;
  bottom: 0.1rem;
}
.foot i{
  font-size: 0.4rem;
  margin: 0 0.2rem;
}
.foot .copyright{
  font-size: 0.14rem;
  margin-top: 0.1rem;
}
.result{
  position: absolute;
  font-size: 0.14rem;
  text-align: left;
  color: #f75454;
  width: 70%;
  top: 3.4rem;
  left: 15%;
}
</style>